<template>
  <div class="">
    <x-header class="header" :left-options="{backText: ''}">固网终端</x-header>
    <div class="content">
      <div>
        <tab :line-width=2 v-model="index">
          <tab-item class="vux-center" :selected="index === i" v-for="(item, i) in list2" @click="index=i" :key="i">{{item}}</tab-item>
        </tab>
        <swiper v-model="index" height="600px" :show-dots="false">
          <swiper-item>
            <div class="tab-swiper vux-center" style="padding-top:10px;">
              <Chart width="100%" height="600px" :option="optionBar_in" :actionOption="actionOption" theme='macarons' @chartClick="handleBarClick" loading></Chart>
            </div>
          </swiper-item>
          <swiper-item>
            <div class="tab-swiper vux-center" style="padding-top:10px;">
              <Chart width="100%" height="600px" :option="optionBar_on" :actionOption="actionOption" theme="shine" @chartClick="handleBarClick" loading></Chart>
            </div>
          </swiper-item>
        </swiper>
      </div>

    
    </div>
  </div>
</template>

<script>
import { XHeader, Tab, TabItem, Swiper, SwiperItem } from "vux";
import Chart from "@/components/Chart";

export default {
  data() {
    return {
      index: 0,
      list2: ['在库终端信息', '在网终端信息'],
      optionBar_in: {},
      optionBar_on: {},
     
      total_in: [],
      total_on: [],
      comp_id: 2,
      goods_type: "",
      type: "in",
      orgItems: [],
      dtlItems: [],
      searchModalOption: {},
      startDate: "",
      endDate: "",
      dtlModalOption: {},
      compModalOption: {},
      actionOption: null,
      compModalTitle: "组织列表",
      dtlModalTitle: "",
      searchKey: ""
    };
  },
  mounted() {
    this.initBar("in");
    this.initBar("on");
  },
  methods: {
    handleSearch() {
      if (this.searchKey == "") return;
      this.$router.push({
        name: "TerminalSearch",
        params: { searchKey: this.searchKey }
      });
    },
    handleBarClick(params) {
      console.log(params);
      let data=params.data;
      this.$router.push({name:'TerminalType',params:{comp_id:data.comp_id,goods_type:data.code,type:data.type}})
      
    },
    handleDetail(org) {
      this.dtlItems = [];
      this.dtlModalTitle = org.name;
      this.dtlModalOption = { visable: true };
      this.$store
        .dispatch("terminal_index_orgs_detail", {
          code: org.code,
          goods_type: this.goods_type,
          type: this.type
        })
        .then(resp => {
          this.dtlItems = resp.data;
        });
    },
    handleLink(imei) {
      this.$root.$emit("modalHideAll");
      this.searchKey = imei;
      this.handleSearch();
    },
    searchByDate() {
      this.searchModalOption = { visable: true, footer: false };
    },
    pushDate() {
      this.$root.$emit("modalHideAll");
      this.$router.push({
        name: "TerminalSearchByDate",
        params: { startDate: this.startDate, endDate: this.endDate }
      });
    },
    initBar(type) {
      this.$store.dispatch("terminal_index", { type }).then(resp => {
        if(type=='in'){
          wsCache.set('TerminalIndexList', resp, {exp : 60*60*24});
        }

        let compNames = _.map(resp.data, n=>n.name.substring(0,2));
        let types = _.pluck(resp.data[0].list1, "name");
        let series = [];
        for (let i = 0; i < types.length; i++) {
          series.push({
            name: types[i],
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: _.map(resp.data, n => {
              n.list1[i].comp_id = n.code;
              n.list1[i].type = type;
              return n.list1[i];
            })
          });
        }
       

        this["optionBar_" + type] = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: types
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "value"
          },
          yAxis: {
            type: "category",
            data: compNames,
            nameTextStyle: {
              fontSize: 16,
              color: "#ff0000"
            }
          },
          itemStyle: {
            normal: {
              shadowBlur: 30,
              shadowColor: "rgba(0, 0, 0, 0.4)"
            }
          },
          series: series
        };
      });
    }
  },
  components: {
    Chart,
    XHeader,
    Tab,
    TabItem,
    Swiper,
    SwiperItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  .title {
    padding-left: 20px;
  }
  i {
    margin-left: 10px;
  }
}
</style>